<template>
  <div id="detail">
    <detail-tab-bar @titleClick="titleClick" ref="tabbar"></detail-tab-bar>
    <scroll :probeType="3" class="content" ref="scroll" @scroll="scrollTop">
      <detail-swiper :topimg="topImg"></detail-swiper>
      <detail-base-info :goods="goodsinfo" />
      <detail-shop :goods="goodsinfo"></detail-shop>
      <detail-img :goods="goodsinfo"></detail-img>
      <detail-par :goods="goodsinfo" ref="par"></detail-par>
      <detail-rate :goods="goodsinfo" ref="rate" />
      <h2>推荐</h2>
      <detail-rec ref="rec" :recommend="recommend"></detail-rec>
    </scroll>
    
    <detail-bbar class="detail-bbar" @addCart="addCart" />
    <back-top @click.native="backTop" v-show="isShow" />
  </div>
</template>

<script>
import DetailTabBar from "./childComps/DetailTabBar.vue";
import { getDetail, Goods, getRecommend } from "@/network/detail.js";
import DetailSwiper from "./childComps/DetailSwiper.vue";
import DetailBaseInfo from "./childComps/DetailBaseInfo.vue";
import Scroll from "../../components/common/scroll/Scroll.vue";
import DetailShop from "./childComps/DetailShop.vue";
import DetailPar from "./childComps/DetailPar.vue";
import DetailImg from "./childComps/DetailImg.vue";
import { debounce } from "@/common/utils.js";
import DetailRate from "./childComps/DetailRate.vue";
import DetailRec from "./childComps/DetailRec.vue";
import DetailBbar from "./childComps/DetailBbar.vue";
import BackTop from "../../components/content/backtop/BackTop.vue";

export default {
  components: {
    DetailTabBar,
    DetailSwiper,
    DetailBaseInfo,
    Scroll,
    DetailShop,
    DetailPar,
    DetailImg,
    DetailRate,
    DetailRec,
    DetailBbar,
    BackTop,
  },
  
    

  data() {
    return {
      iid: null,
      topImg: [],
      goodsinfo: {},
      recommend: [],
      positionY: [],
      index: 0,
      isShow: false,
    };
  },
  created() {
    this.iid = this.$route.params.iid;
    // 请求详情数据
    getDetail(this.iid).then((res) => {
      const data = res.result;
      // console.log(data);
      this.data = data;
      // 取出轮播图数据
      this.topImg = data.itemInfo.topImages;

      // 取出介绍信息
      this.itemInfo = data.itemInfo;
      // console.log(data);
      this.goodsinfo = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services,
        data.shopInfo,
        data.itemParams,
        data.detailInfo,
        data.rate,
        data.newprice
      );
    });

    // 请求推荐数据
    getRecommend().then((res) => {
      // console.log(res);
      this.recommend = res.data.list;
    });
  },
  mounted() {
    const refresh = debounce(this.$refs.scroll.refresh, 500);
    this.$bus.$on("DetimgLoad", () => {
      refresh();
    });

    const refresh1 = debounce(this.$refs.scroll.refresh, 500);
    this.$bus.$on("recLoad", () => {
      refresh();
    });
  },
  updated() {},

  methods: {
    titleClick(index) {
      this.index = index;
      this.positionY = [];
      this.positionY.push(0);
      this.positionY.push(this.$refs.par.$el.offsetTop);
      this.positionY.push(this.$refs.rate.$el.offsetTop);
      this.positionY.push(this.$refs.rec.$el.offsetTop);
      // console.log(this.positionY);
      this.$refs.scroll.scrollTo(0, -this.positionY[index], 1);
    },
    scrollTop() {
      if (this.positionY.length == 0) {
        this.titleClick(0);
      }
      if (
        -this.$refs.scroll.scroll.y > this.positionY[0] &&
        -this.$refs.scroll.scroll.y < this.positionY[1]
      ) {
        this.$refs.tabbar.currentIndex = 0;
      }
      if (
        -this.$refs.scroll.scroll.y > this.positionY[1] &&
        -this.$refs.scroll.scroll.y < this.positionY[2]
      ) {
        this.$refs.tabbar.currentIndex = 1;
      }
      if (
        -this.$refs.scroll.scroll.y > this.positionY[2] &&
        -this.$refs.scroll.scroll.y < this.positionY[3]
      ) {
        this.$refs.tabbar.currentIndex = 2;
      }
      if (-this.$refs.scroll.scroll.y > this.positionY[3]) {
        this.$refs.tabbar.currentIndex = 3;
      }

      // 现存bug：点击tabbar滚动时，如果点击过快会自动返回顶部
      // 原因：在点击的时候所有图片未加载完毕，导致positionY中的数据不准确或不存在

      // 现存bug2：在滚动窗口时，会频繁调用scrollTop函数
      // 原因：函数防抖的不熟练

      // 现存bug3：如果迅速上拉使窗口滑动，会令tabbar直接跳过某个选项  如果中间在此点击使滑动停止，会造成tabbar的显示bug
      // 原因：

      // backTop的显示与隐藏
      this.isShow = this.$refs.scroll.scroll.y < -1000;
    },
    backTop() {
      this.$refs.scroll.scrollTo(0, 0, 500);
      // console.log(this.$refs.scroll);
      // console.log('111');
    },
    addCart() {
      // 获取购物车要展示的信息
      const product = {};
      product.img = this.topImg[0];
      product.title = this.goodsinfo.title;
      product.desc = this.goodsinfo.desc;
      product.price = this.itemInfo.lowNowPrice;
      product.iid = this.itemInfo.iid;
      // console.log('111');
      // console.log(this.topImg[0]);
      // console.log(this.goodsinfo);
      // console.log(product);
      // console.log(this.itemInfo);
      // this.$store.commit('addCart', product);
      this.$store.dispatch("addCart", product);
    },
  },
};
</script>

<style lang="css" scoped>
#detail {
  height: 100vh;
  background-color: #fff;
  position: relative;
  z-index: 11;
}
.content {
  background-color: #fff;
  height: calc(100% - 44px - 44px);
  overflow: hidden;
}
</style>